<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件Prop单向数据流</title>
    <script src="../vue.global.js"></script>
    <style>
        .red{
            color:red;
        }
        .font-big{
            font-size: 50px;
        }
    </style>
</head>
<body>

<div id="App">

    <html-a v-bind:parent-msg="message" v-bind:parent-counter="counter"></html-a>

</div>


<script>


    const htmlA = {//子组件
        data(){  //数据
            return {
                message:"子组件hello",
                childCounter:this.parentCounter,
            }
        },
       // props:['abc'],//组件通信
        props:['parentMsg','parentCounter'],//组件通信
        //模板
        template:`
        <div>{{message}}</div>
        <div>{{parentMsg}}</div>
        <div>parentCounter:{{parentCounter}}</div>
        <div>childCounter:{{childCounter}}</div>
        <button v-on:click="parentCounter++">parentCounter++</button>
        <button v-on:click="childCounter++">childCounter++</button>
        `
    };

    const vm = Vue.createApp({  //根组件

        data(){
            return {
                message:"父组件hello",
                counter:10
            }
        },
        components:{
            'html-a':htmlA
        }
    }).mount("#App");


</script>
</body>
</html>